<template>
  <div style="margin-top: 20px">
    <!-- 条件查询 -->
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <el-input
          v-model="query.sourceFileName"
          clearable
          size="small"
          placeholder="请输入原脚本文件名称搜索"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.convertFileName"
          clearable
          size="small"
          placeholder="请输入转换后脚本文件名称搜索"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-select
          v-model="query.status"
          clearable
          size="small"
          placeholder="转换状态"
          class="filter-item"
          style="width: 120px"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in statusList"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>
        <el-select
          v-model="query.emptyTestStatus"
          clearable
          size="small"
          placeholder="验证状态"
          class="filter-item"
          style="width: 120px"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in testStatusList"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>
        <rrOperation :crud="crud" />
      </div>
    </div>
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      :span-method="dataSpanMethod"
      max-height="350"
      border
      @select="crud.selectChange"
      @select-all="crud.selectAllChange"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column :show-overflow-tooltip="true" label="原文件名称" prop="sourceFileName" />
      <el-table-column :show-overflow-tooltip="true" label="原文件大小" prop="sourceFileSize" width="120" />
      <el-table-column :show-overflow-tooltip="true" label="转换状态" prop="status" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 'SUCCESS'">成功</el-tag>
          <el-tag v-else-if="scope.row.status == 'FAIL'" type="warning">失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="转换后文件名称" prop="convertFileName" />
      <el-table-column :show-overflow-tooltip="true" label="转换后文件大小" prop="convertFileSize" width="120" />
      <el-table-column :show-overflow-tooltip="true" label="测试状态" prop="testStatus" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.emptyTestStatus === 'SUCCESS'">成功</el-tag>
          <el-tag v-else-if="scope.row.emptyTestStatus == 'FAIL'" type="warning">失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="同屏预览" prop="zhHis" width="80">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="zhHandleClick(scope.row)">同屏预览</el-button>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="历史记录" prop="zhHis" width="80">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="historyHandleClick(scope.row)">历史记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style=" float: right;">
      <!--分页组件-->
      <pagination />
    </div>

    <!-- 同屏预览 -->
    <el-dialog :visible.sync="isShowComparison" append-to-body title="脚本同屏预览" width="90%" top="5vh">
      <same-screen-comparison
        v-if="isShowComparison"
        :convert-list-pk-id="lookConvertListPkId"
        :convert-target-pk-id="lookConvertTargetListPkId"
        :is-allow-edit="true"
        @changeComparisonVisible="changeComparisonVisible"
      />
    </el-dialog>

    <!-- 历史记录 -->
    <el-dialog :visible.sync="isShowHistory" append-to-body title="历史记录" width="90%" top="5vh">
      <history :convert-list-pk-id="lookConvertListPkId" :convert-target-pk-id="lookConvertTargetListPkId" :script-name="lookSourceScriptName" />
    </el-dialog>
  </div>
</template>
<script>
import scriptConvertListApi from '@/api/script/transfer/script-convert-list'
import CRUD, { crud, form, header, presenter } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import sameScreenComparison from '../convertResult/same-screen-comparison'
import history from '../history/index'

const defaultCrud = CRUD({ title: '脚本转换最终成果', url: 'api/script/convert/list', crudMethod: { ...scriptConvertListApi }})
const defaultForm = {}

export default {
  name: 'ScriptTestResult',
  components: { pagination, rrOperation, sameScreenComparison, history },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  props: {
    convertTaskPkId: {
      required: true,
      type: String
    }
  },
  data() {
    return {
      statusList: [
        { key: 'SUCCESS', label: '成功' },
        { key: 'FAIL', label: '失败' },
        { key: 'PROCESSING', label: '转换中' }
      ],
      zhHisSync: false,
      testStatusList: [
        { key: 'SUCCESS', label: '成功' },
        { key: 'FAIL', label: '失败' }
      ],
      testTypeList: [
        { key: 'SYNTAX', label: '语法测试' },
        { key: 'PARAMETER', label: '带参数测试' },
        { key: 'LOGIC', label: '逻辑测试' }
      ],
      indexArray: [],
      tableData: [],
      isShowComparison: false,
      isShowHistory: false,
      lookConvertListPkId: null,
      lookConvertTargetListPkId: null,
      lookSourceScriptName: null
    }
  },
  methods: {
    [CRUD.HOOK.beforeRefresh](crud) {
      crud.query.convertTaskPkId = this.convertTaskPkId
    },
    // 合并单元格-START
    [CRUD.HOOK.afterRefresh](crud) {
      this.indexArray = []
      this.tableData = crud.data
      let count = 0
      for (let rowIndex = 0; rowIndex < this.tableData.length;) {
        this.indexArray.push(rowIndex)
        count = this.getRows(rowIndex, this.tableData[rowIndex].sourceFileName)
        rowIndex += count
      }
    },
    getRows(rowIndex, sourceFileName) {
      let count = 0
      for (let i = rowIndex; i < this.tableData.length; i++) {
        if (this.tableData[i].sourceFileName === sourceFileName) {
          count++
        } else {
          break
        }
      }
      return count
    },
    dataSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        let rowCount = 0
        if (this.indexArray.includes(rowIndex)) {
          rowCount = this.getRows(rowIndex, row.sourceFileName)
          return { rowspan: rowCount, colspan: 1 }
        } else {
          return { rowspan: 0, colspan: 0 }
        }
      }
    },
    // 历史记录 指定数据赋值
    historyHandleClick(convertList) {
      this.isShowHistory = true
      this.lookConvertListPkId = convertList.pkId
      this.lookSourceScriptName = convertList.sourceFileName
      this.lookConvertTargetListPkId = convertList.convertTargetPkId
    },
    // 同屏预览 指定数据赋值
    zhHandleClick(convertList) {
      this.isShowComparison = true
      this.lookConvertListPkId = convertList.pkId
      this.lookConvertTargetListPkId = convertList.convertTargetPkId
    },
    // 控制同屏预览是否展示
    changeComparisonVisible(val) {
      this.isShowComparison = val
    }
  }
}
</script>
